Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up Gallery block move/remove UI #16793

Merged
merged 4 commits into from
Jul 30, 2019
Merged

Clean up Gallery block move/remove UI #16793

merged 4 commits into from
Jul 30, 2019

Conversation

kjellr
Copy link
Contributor

@kjellr kjellr commented Jul 29, 2019

This PR tidies up a couple small visual bugs with the Gallery block's individual image controls. It also switches the buttons to appear larger when possible. This is helpful (especially on mobile) to create a more visible hit area for these previously-tiny controls.

1. Button size improvements:

Before

Screen Shot 2019-07-29 at 9 25 00 AM

After

Screen Shot 2019-07-29 at 9 24 18 AM

The buttons increase from 20 to 24px. Note that on larger screens, these buttons will shrink back down if there are more than 7 columns present. Is to prevent overlap:

number-of-columns

2. Clean up extra is-selected border on the caption field.

I'm not sure when this made its first appearance, but I believe it's unintentional?

Before

Screen Shot 2019-07-29 at 10 03 14 AM

After

Screen Shot 2019-07-29 at 9 48 00 AM

3. Removes box shadow from move/remove controls on hover and focus

These borders weren't working against the blue background.

Before

Screen Shot 2019-07-29 at 9 56 47 AM

After

Screen Shot 2019-07-29 at 9 56 26 AM

@kjellr kjellr added [Type] Bug An existing feature does not function as intended [Type] Enhancement A suggestion for improvement. [Block] Gallery Affects the Gallery Block - used to display groups of images labels Jul 29, 2019
@kjellr kjellr requested a review from mapk July 29, 2019 14:04
@kjellr kjellr self-assigned this Jul 29, 2019
@kjellr kjellr added the Needs Design Feedback Needs general design feedback. label Jul 29, 2019
@@ -19,7 +19,7 @@ ul.wp-block-gallery {
outline: none;
}

.is-selected {
> .is-selected {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works and I'm fine with it. Wanted to run by you a different approach to see what you think: figure.is-selected (I'd also apply this to the is-transient rule below for clarification). Those seem to be the only two rules that don't have a block/element class along with the modifier class.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, that makes sense. I'll push a quick update to do that.

Copy link
Member

@oandregal oandregal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left one suggestion, in case you think it makes sense. Otherwise, this is good to go.

@kjellr
Copy link
Contributor Author

kjellr commented Jul 30, 2019

Thanks, everyone!

@kjellr kjellr merged commit 6f56a7a into master Jul 30, 2019
@kjellr kjellr deleted the update/gallery-block-ui branch July 30, 2019 16:58
@kjellr kjellr added this to the Gutenberg 6.3 milestone Jul 30, 2019
gziolo pushed a commit that referenced this pull request Aug 29, 2019
* Use larger buttons when we can.

* Avoid adding selected border to the caption section of the image.

* Remove hover/focus box shadows because they clash with the blue background.

* Revise method of specifying the .is-selected class.
gziolo pushed a commit that referenced this pull request Aug 29, 2019
* Use larger buttons when we can.

* Avoid adding selected border to the caption section of the image.

* Remove hover/focus box shadows because they clash with the blue background.

* Revise method of specifying the .is-selected class.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants